@import "../../sass/themes/base";
@import "../../sass/themes/table";

@import "../../sass/mixins/base";
@import "../../sass/mixins/compatible";
@import "../../sass/mixins/form";

@charset "utf-8";

$table-prefix: #{'.' + $css-prefix + 'table'};

#{$table-prefix}{
  position: relative;
  &,table{
    padding: 0;
    border: 0;
    width: 100%;
  }
  border-top-left-radius: $table-border-radius;
  border-top-right-radius: $table-border-radius;
  overflow: hidden;
  tr{
    &:hover{
      td{
        background-color: lighten($info-color, 40%) !important;
      }
    }
  }
  &-footer,
  th,
  td{
    padding: $table-space;
    line-height: $table-td-line-height;
    font-weight: $font-weight;
  }
  th{
    background-color: $table-th-bg-color;
    color: $table-th-color;
    line-height: $table-th-line-height;
    font-weight: $table-th-font-weight;
    font-size: $table-th-font-size;
    &:first-child{
      border-top-left-radius: $table-border-radius - 1;
    }
    &:last-child{
      border-top-right-radius: $table-border-radius - 1;
    }
    &.sorting{
      position: relative;
      cursor: pointer;
      padding-right: 20px;
      .icon-caret-up,
      .icon-caret-down{
        font-size: 20px;
        @include transform(scale(0.5) rotate(0deg));
        position: absolute;
        color: #a8aebf;
        cursor: pointer;
      }
      .sorting-double{
        position: absolute;
        width: 20px;
        height: 22px;
        .icon-caret-up,
        .icon-caret-down{
          left: 0;
        }
        .icon-caret-up{
          top: -4px;
        }
        .icon-caret-down{
          bottom: -4px;
        }
      }
    }
    &.sorting-desc{
      @extend .sorting;
      cursor: default;
      .icon-caret-down{
        color: #fff;
        cursor: default;
      }
    }
    &.sorting-asc{
      @extend .sorting;
      cursor: default;
      .icon-caret-up{
        color: #fff;
        cursor: default;
      }
    }
  }
  td{
    .action,
    &.action{
      text-align: center;
      [class*="icon"]{
        color: $lightGray;
        padding: 0 5px;
        cursor: pointer;
        text-decoration: none;
        &:hover{
          color: $link-color;
        }
      }
    }
  }
  &-loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .7);
    color: $info-color;
    [class*='icon']{
      position: absolute;
      left: 50%;
      right: 0;
      top: 50%;
      margin: -10px 0 0 -10px;
      font-size: 20px;
      line-height: 1em;
    }
  }
  &-no-data{
    text-align: center;
    color: #eee;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    padding: 30px;
    line-height: 1em;
    font-weight: 900;
    font-size: 28px;
  }
  &-pagination{
    @include clearfix();
    .#{$css-prefix}pagination-wrap{
      float: right;
    }
  }
  &-editable{
    input{
      @include input();
    }
  }
}

#{$table-prefix} table > tbody > tr:nth-child(even) td{
  background-color: $table-tr-even-gb-color;
}
#{$table-prefix} table > tbody > tr:nth-child(odd) td{
  background-color: $table-tr-odd-gb-color;
}

#{$table-prefix}-bordered-bottom{
  @extend #{$table-prefix};
  tbody{
    td{
      border-bottom: 1px solid $table-border-color;
    }
  }
}

#{$table-prefix}-bordered{
  @extend #{$table-prefix}-bordered-bottom;
  border: 1px solid $table-border-color;
  thead{
    th{
      border-bottom: 1px solid $table-border-color;
      border-right: 1px solid $table-border-color;
    }
    tr > th:last-child{
      border-right: 0;
    }
  }
  tbody{
    td{
      border-right: 1px solid $table-border-color;
    }
    tr:last-child > td{
      border-bottom: 0;
    }
    tr > td:last-child{
      border-right: 0;
    }
  }
  #{$table-prefix}-footer{
    border-top: 1px solid $table-border-color;
  }
}
